<template>
	<div id="basicInformation">
		<el-row>
			<el-col :span="4" class="backgroundTitelBox">
				{{ $t('agent.team_info') }}
			</el-col>
			<el-col :span="2" class="refrestBox">
				<el-button
					type="primary"
					icon="el-icon-refresh"
					@click="refresh"
				>
					{{ $t('common.refresh') }}
				</el-button>
			</el-col>
		</el-row>
		<div class="titelBox">
			<el-row>
				<el-col :span="10" style="cursor: pointer">
					<span>{{ $t('agent.team_overview') }}</span>
					<b>(注：频繁刷新无效，数据更新频率为10分钟)</b>
				</el-col>
			</el-row>
		</div>
		<el-row class="msgList">
			<el-col :span="6">
				{{ $t('agent.sub_agent_numbers') }}：
				<i v-if="activeL" class="el-icon-loading"></i>
				<span v-else>
					{{ teamInforData.underProxyNum || '0' }}
				</span>
			</el-col>
			<el-col :span="6">
				{{ $t('agent.direct_agent_number') }}：
				<i v-if="activeL" class="el-icon-loading"></i>
				<span v-else>
					{{ teamInforData.directlyUnderProxyNum || '0' }}
				</span>
			</el-col>
			<el-col :span="6">
				{{ $t('agent.sub_member_numbers') }}：
				<i v-if="activeL" class="el-icon-loading"></i>
				<span v-else>
					{{ teamInforData.underMemberNum || '0' }}
				</span>
			</el-col>
			<el-col :span="6">
				{{ $t('agent.direct_member_number') }}：
				<i v-if="activeL" class="el-icon-loading"></i>
				<span v-else>
					{{ teamInforData.directlyUnderMemberNum || '0' }}
				</span>
			</el-col>
			<!-- 直属会员转出人数 -->
			<el-col :span="6">
				{{ $t('agent.direct_member_out_number') }}：
				<i v-if="activeL" class="el-icon-loading"></i>
				<span v-else>
					{{ teamInforData.directlyMemberTransferOutNum || 0 }}
				</span>
			</el-col>
			<!--直属会员转入人数 -->
			<el-col :span="6">
				{{ $t('agent.direct_member_in_number') }}：
				<i v-if="activeL" class="el-icon-loading"></i>
				<span v-else>
					{{ teamInforData.directlyMemberTransferInNum || 0 }}
				</span>
			</el-col>
		</el-row>
		<el-divider></el-divider>
		<div class="titelBox">
			<el-row>
				<el-col :span="6">
					<span>{{ $t('agent.team_add') }}</span>
				</el-col>
			</el-row>
		</div>
		<el-row class="msgList">
			<el-col :span="6">
				{{ $t('agent.today_sub_agent_new_add') }}：
				<i v-if="activeL" class="el-icon-loading"></i>
				<span v-else>{{ teamInforData.todayNewProxyNum || 0 }}</span>
			</el-col>
			<el-col :span="6">
				{{ $t('agent.today_direct_agent_new_add') }}：
				<i v-if="activeL" class="el-icon-loading"></i>
				<span v-else>
					{{ teamInforData.todayNewDirectlyProxyNum || 0 }}
				</span>
			</el-col>
			<el-col :span="6">
				{{ $t('agent.month_sub_agent_new_add') }}：
				<i v-if="activeL" class="el-icon-loading"></i>
				<span v-else>{{ teamInforData.monthNewProxyNum || 0 }}</span>
			</el-col>
			<!-- <el-col :span="6">
				{{ $t('agent.month_direct_agent_new_add') }}：
				<i v-if="activeL" class="el-icon-loading"></i>
				<span v-else>
					{{ teamInforData.monthNewDirectlyProxyNum || 0 }}
				</span>
			</el-col> -->
			<el-col :span="6">
				{{ $t('agent.today_sub_member_new_add') }}：
				<i v-if="activeL" class="el-icon-loading"></i>
				<span v-else>{{ teamInforData.todayNewMemberNum || 0 }}</span>
			</el-col>
			<el-col :span="6">
				{{ $t('agent.today_direct_member_new_add') }}：
				<i v-if="activeL" class="el-icon-loading"></i>
				<span v-else>
					{{ teamInforData.todayNewDirectlyMemberNum || 0 }}
				</span>
			</el-col>
			<el-col :span="6">
				{{ $t('agent.month_sub_member_new_add') }}：
				<i v-if="activeL" class="el-icon-loading"></i>
				<span v-else>{{ teamInforData.monthNewMemberNum || 0 }}</span>
			</el-col>
			<!-- <el-col :span="6">
				{{ $t('agent.month_direct_member_new_add') }}：
				<i v-if="activeL" class="el-icon-loading"></i>
				<span v-else>
					{{ teamInforData.monthNewDirectlyMemberNum || 0 }}
				</span>
			</el-col> -->
		</el-row>
		<el-divider></el-divider>
		<div class="titelBox">
			<el-row>
				<el-col :span="6">
					<!-- <span>{{ $t('agent.member_quality') }}</span> -->
					<span>会员新增</span>
				</el-col>
			</el-row>
		</div>
		<el-row class="msgList">
			<el-col :span="6">
				{{ $t('agent.today_active_people_number') }}：
				<i v-if="activeL" class="el-icon-loading"></i>
				<span v-else>{{ teamInforData.todayActiveNum || '0' }}</span>
			</el-col>
			<el-col :span="6">
				{{ $t('agent.today__effective_new_add') }}：
				<i v-if="activeL" class="el-icon-loading"></i>
				<span v-else>
					{{ teamInforData.todayNewActiveNum || '0' }}
				</span>
			</el-col>
			<el-col :span="6">
				{{ $t('agent.month_active_people_number') }}：
				<i v-if="activeL" class="el-icon-loading"></i>
				<span v-else>{{ teamInforData.monthActiveNum || '0' }}</span>
			</el-col>
			<el-col :span="6">
				{{ $t('agent.month_effective_new_add') }}：
				<i v-if="activeL" class="el-icon-loading"></i>
				<span v-else>
					{{ teamInforData.monthNewEffecactiveNum || '0' }}
				</span>
			</el-col>
			<!-- <el-col :span="6">
				{{ $t('agent.first_deposit_count') }}：
				<i v-if="activeL" class="el-icon-loading"></i>
				<span v-else>
					{{ teamInforData.totalFirstDepositNum || '0' }}
				</span>
			</el-col> -->
			<!--<el-col :span="6">
				{{ $t('agent.first_deposit_mount') }}：
				<i v-if="activeL" class="el-icon-loading"></i>
				<span v-else>
					{{ parentData.currencySymbol
					}}{{
						handleNumberAgent(
							parentData.currency,
							teamInforData.totalFirstDepositAmount
						)
					}}
				</span>
			</el-col>-->
		</el-row>
		<el-divider></el-divider>
		<div class="titelBox">
			<el-row>
				<el-col :span="6">
					<span>{{ $t('agent.member_profit_loss_info') }}</span>
				</el-col>
			</el-row>
		</div>
		<el-row class="msgList" style="margin-bottom: 30px">
			<el-col :span="6">
				{{ $t('agent.total_bet_amount') }}：
				<i v-if="activeL" class="el-icon-loading"></i>
				<span v-else>
					{{
						handleNumberAgent(
							parentData.currency,
							teamInforData.totalBetAmount
						)
					}}
				</span>
			</el-col>
			<el-col :span="6">
				{{ $t('agent.total_effective_bet') }}：
				<i v-if="activeL" class="el-icon-loading"></i>
				<span v-else>
					{{
						handleNumberAgent(
							parentData.currency,
							teamInforData.totalValidBetAmount
						)
					}}
				</span>
			</el-col>
			<el-col :span="6">
				{{ $t('agent.total_bet_profit_loss') }}：
				<i v-if="activeL" class="el-icon-loading"></i>
				<span v-else>
					{{
						handleNumberAgent(
							parentData.currency,
							teamInforData.totalNetAmount
						)
					}}
				</span>
			</el-col>
			<!-- <el-col :span="6">
				{{ $t('agent.total_net_profit_loss') }}：
				<i v-if="activeL" class="el-icon-loading"></i>
				<span v-else>
					{{ parentData.currencySymbol
					}}{{
						handleNumberAgent(
							parentData.currency,
							teamInforData.totalRushAmount
						)
					}}
				</span>
			</el-col> -->
			<el-col :span="6">
				{{ $t('agent.total_rebate') }}：
				<i v-if="activeL" class="el-icon-loading"></i>
				<span v-else>
					{{
						handleNumberAgent(
							parentData.currency,
							teamInforData.totalBetRebateAmount
						)
					}}
				</span>
			</el-col>
			<!-- <el-col :span="6">
				{{ $t('agent.total_event_offer') }}：
				<i v-if="activeL" class="el-icon-loading"></i>
				<span v-else>
					{{ parentData.currencySymbol
					}}{{
						handleNumberAgent(
							parentData.currency,
							teamInforData.totalActiveDiscountAmount
						)
					}}
				</span>
			</el-col> -->
			<!-- <el-col :span="6">
				{{ $t('agent.total_benefit_amount') }}：
				<i v-if="activeL" class="el-icon-loading"></i>
				<span v-else>
					{{ parentData.currencySymbol
					}}{{
						handleNumberAgent(
							parentData.currency,
							teamInforData.totalDiscountAmount
						)
					}}
				</span>
			</el-col> -->
			<!-- <el-col :span="6">
				{{ $t('agent.deposit_discount') }}：
				<i v-if="activeL" class="el-icon-loading"></i>
				<span v-else>
					{{ parentData.currencySymbol
					}}{{
						handleNumberAgent(
							parentData.currency,
							teamInforData.totalDepositDiscountAmount
						)
					}}
				</span>
			</el-col> -->
			<el-col :span="6">
				{{ $t('agent.total_adjust') }}：
				<i v-if="activeL" class="el-icon-loading"></i>
				<span v-else>
					{{
						handleNumberAgent(
							parentData.currency,
							teamInforData.totalOtherAdjustAmount
						)
					}}
				</span>
			</el-col>
			<!-- done 0.2.1  -->
		</el-row>
		<el-divider></el-divider>
	</div>
</template>

<script>
import list from '@/mixins/list'
// import dayjs from 'dayjs'
export default {
	mixins: [list],
	props: {
		parentData: { type: Object, default: () => ({}) },
		teamInforList: { type: Object, default: () => ({}) }
	},
	data() {
		return {
			activeL: false,
			teamInforData: {}
		}
	},
	computed: {},
	watch: {
		teamInforList: {
			handler(newV) {
				this.teamInforData = newV
			},
			deep: true
		},
		parentData: {
			handler() {
				this.refresh()
			},
			deep: true
		}
	},
	created() {
		this.refresh()
	},
	mounted() {},
	methods: {
		handleNumberAgent(sign, num) {
			const number = num === null ? (num = 0) : num
			return this.handleNumber(sign, number)
		},
		// 团队信息
		getProxyDetailTeamInfo(val) {
			this.$api.getProxyDetailTeamInfo({ userId: val }).then((res) => {
				if (res?.code === 200 && res.data) {
					this.teamInforData = res.data
					this.activeL = false
				}
			})
		},
		refresh(val) {
			this.activeL = true
			const params = this.parentData.userId
			this.getProxyDetailTeamInfo(params)
		}
	}
}
</script>

<style lang="scss" scoped>
#basicInformation {
	font-size: 14px;
	line-height: 40px;
	padding-top: 10px;
	padding-bottom: 40px;
}
::v-deep .el-dialog__header {
	text-align: center;
	color: #909399;
	font-weight: 700;
}
.titelBox {
	font-size: 16px;
	font-weight: bold;
	position: relative;

	b{
		font-weight: 500;
		font-size: 12px;
	}
}
.backgroundTitelBox {
	width: 188px;
	height: 40px;
	text-align: center;
	background: #000;
	color: rgb(255, 255, 255);
}
.cell .el-button {
	min-width: 60px;
	height: 24px;
	line-height: 24px;
}
.refrestBox {
	text-align: center;
}
.msgList {
	line-height: 24px;
	margin-bottom: 10px;
}
.textR {
	text-align: right;
}
.paddingL {
	padding-left: 30px;
}
.width70 {
	display: inline-block;
	box-sizing: border-box;
	min-width: 68%;
}
.width30 {
	display: inline-block;
	min-width: 30%;
}
.decoration {
	text-decoration: underline;
	cursor: pointer;
}
</style>
